import React, { createContext, useState } from 'react'
import CounterClass from './01_体验hooks/01_counter-class'
import CounterHook from './01_体验hooks/02_counter-hook'
import MultiHookState from './02_useState的使用/01_多个状态和复杂状态'
import ComplexHookState from './02_useState的使用/02_复杂状态的修改'
import ClassCounterClassTitleChange from './03_useEffect的使用/01_class实现title的修改'
import HookCounterTitleChange from './03_useEffect的使用/02_useEffect的hook实现title的修改'
import EffectHookCancelDemo from './03_useEffect的使用/03_userEffect模拟订阅和取消订阅'
import MultiEffectHookDemo from './03_useEffect的使用/04_多个Effect一起使用'
import ContextHookDemo from './04_useContext的使用/01_useContext的使用'
import Home from './05_useReducer的使用/home'
import Profile from './05_useReducer的使用/profile'
import CallbackHookDemo01 from './06_useCallback的使用/01_useCallback不能进行的性能优化'
import CallbackHookDemo02 from './06_useCallback的使用/02_useCallback进行性能优化'
import MemoHoosDemo01 from './07_useMemo的使用/01_useMemo复杂计算的应用'
import MemoHookDemo02 from './07_useMemo的使用/02_useMemo传入子组件应用类型'
import RefHookDemo01 from './08_useRef的使用/01_useRef引用Dom'
import RefHookDemo02 from './08_useRef的使用/02_useRef引用其他数据'
import ForwardRefDemo from './09_useImperativeHandle/01_回顾forwardRef的用法'
import UseImperativeHandleHookDemo from './09_useImperativeHandle/02_useImperativeHandle的用法'
import EffectCounterDemo from './10_useLayoutEffect/01_useEffect的count修改'
import LayoutEffectCounterDemo from './10_useLayoutEffect/02_useLayoutEffect的count修改 copy'
import CustomLifeHookDemo01 from './11_自定义hook/01_认识自定义hook'
import CustomContextShareHook from './11_自定义hook/02_自定义hook的练习-context'
import CustomScrollPositionHook from './11_自定义hook/03_自定义hook的练习-获取滚动位置'
import CustomDateStoreHook from './11_自定义hook/04_自定义hook练习-localStorage'

export const UserContext = createContext()
export const TokenContext = createContext()

export const ThemeContext = createContext()

export default function App() {
  const [show, setShow] = useState(true)

  return (
    <div>
      App
      {/* <CounterClass/> */}
      {/* <CounterHook/> */}
      {/* <MultiHookState/> */}
      {/* <ComplexHookState/> */}
      {/* <ClassCounterClassTitleChange/> */}
      {/* <HookCounterTitleChange/> */}
      {/* {show && <EffectHookCancelDemo/>} */}
      {/* <MultiEffectHookDemo/> */}
      {/* <UserContext.Provider value={{name: 'xx', age: 18}}>
        <ThemeContext.Provider value={{fontSize: '30px', color: 'red'}}>
          <ContextHookDemo/>
        </ThemeContext.Provider>
      </UserContext.Provider> */}

      {/* 5.useReducer */}
      {/* <Home/>
      <Profile/> */}

      {/* 6.useCallback */}
      {/* <CallbackHookDemo01/> */}
      {/* <CallbackHookDemo02/> */}

      {/* 7.useMemo */}
      {/* <MemoHoosDemo01/> */}
      {/* <MemoHookDemo02/> */}

      {/* 8.useRef */}
      {/* <RefHookDemo01/> */}
      {/* <RefHookDemo02/> */}

      {/* 9. */}
      {/* <ForwardRefDemo/> */}
      {/* <UseImperativeHandleHookDemo/> */}

      {/* 10 */}
      {/* <EffectCounterDemo/> */}
      {/* <LayoutEffectCounterDemo/> */}

      {/* 11 */}
      {/* {show && <CustomLifeHookDemo01/>} */}
      {/* <UserContext.Provider value={{name: 'mx', age: 18}}>
        <TokenContext.Provider value="adgag">
          <CustomContextShareHook/>
        </TokenContext.Provider>
      </UserContext.Provider> */}
      {/* <CustomScrollPositionHook/> */}
      <CustomDateStoreHook/>       

      <button onClick={e => setShow(!show)}>switch</button>
    </div>
  )
}
